{template 'member', 'header'}
<link href="{JS_PATH}cropper/cropper.min.css" rel="stylesheet">
<link href="{JS_PATH}avatar/avatar.css" rel="stylesheet">
<script src="{JS_PATH}cropper/cropper.min.js"></script>
<script src="{JS_PATH}avatar/avatar.js"></script>
<div class="member_container main">
{template 'member', 'account_manage_left'}
  <div class="main_right">
    <div class="tit"><div class="th3">{L('modify').L('avatar')}</div></div>
    <div class="main_cont">
    <div class="ibox-content">
    <div class="row">
        <div id="crop-avatar" class="col-md-6">
            <div class="avatar-view">
                <img src="{$avatar}">
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form class="avatar-form">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                </div>
                <div class="modal-body">
                    <div class="avatar-body">
                        <div class="avatar-upload">
                            <input class="avatar-src" name="avatar_src" type="hidden">
                            <input class="avatar-data" name="avatar_data" type="hidden">
                            <span class="btn btn-danger fileinput-button"><i class="fa fa-cloud-upload"></i> <span> <?php echo L('请选择图片');?> </span> <input class="avatar-input" id="avatarInput" name="avatar_file" type="file"></span>
                            <span id="avatar-name"></span>
                        </div>
                        <div class="row avatar-b">
                            <div class="col-md-9">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="avatar-preview preview-lg" id="imageHead"></div>
                                <div class="avatar-preview preview-md"></div>
                                <div class="avatar-preview preview-sm"></div>
                            </div>
                        </div>
                        <div class="row avatar-btns">
                            <div class="col-md-4">
                              <button type="button" class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-45" title="向左旋转">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="cropper.rotate(-45)">
                                  <!--<span class="fa fa-undo"></span>-->
                                </span>
                              </button>
                              <button type="button" class="btn btn-danger fa fa-repeat" data-method="rotate" data-option="45" title="向右旋转">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="cropper.rotate(45)">
                                  <!--<span class="fa fa-repeat"></span>-->
                                </span>
                              </button>
                            </div>
                            <div class="col-md-5 text-right">
                              <button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
                                </span>
                              </button>
                              <button type="button" class="btn btn-danger fa fa-crop" data-method="setDragMode" data-option="crop" title="剪裁">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="" data-original-title="cropper.setDragMode(&quot;crop&quot;)">
                                  <!--<span class="fa fa-crop"></span>-->
                                </span>
                              </button>
                              <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
                                  <!--<span class="fa fa-search-plus"></span>-->
                                </span>
                              </button>
                              <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
                                  <!--<span class="fa fa-search-minus"></span>-->
                                </span>
                              </button>
                              <button type="button" class="btn btn-danger fa fa-arrows-h" data-method="scaleX" data-option="1" title="水平翻转">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="cropper.scaleX(1)">
                                  <!--<span class="fa fa-arrows-h"></span>-->
                                </span>
                              </button>
                              <button type="button" class="btn btn-danger fa fa-arrows-v" data-method="scaleY" data-option="1" title="垂直翻转">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="cropper.scaleY(1)">
                                  <!--<span class="fa fa-arrows-v"></span>-->
                                </span>
                              </button>
                              <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)">
                                  <!--<span class="fa fa-refresh"></span>-->
                                </span>
                              </button>
                              <!--<button type="button" class="btn btn-danger fa fa-download" download="cropped.jpg" title="下载">
                                <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="cropper.scaleY(-1)">
                                  <span class="fa fa-download"></span>
                                </span>
                              </button>-->
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
$('#avatarInput').on('change', function(e) {
    var filemaxsize = 1024 * 5;
    var target = $(e.target);
    var Size = target[0].files[0].size / 1024;
    if(Size > filemaxsize) {
        alert('图片过大，请重新选择!');
        $('#avatarInput').val('');
        $(".avatar-wrapper").childre().remove();
        return false;
    }
    if(!this.files[0].type.match(/image.*/)) {
        alert('请选择正确的图片!');
        $('#avatarInput').val('');
    } else {
        var filename = document.querySelector("#avatar-name");
        var texts = document.querySelector("#avatarInput").value;
        var teststr = texts;
        testend = teststr.match(/[^\\]+\.[^\(]+/i);
        filename.innerHTML = testend;
    }
});
$(".avatar-save").on("click", function() {
    var avatarInput = $('#avatarInput').val();
    if(!avatarInput) {
        alert('请选择图片!');
        $('#avatarInput').val('');
        return false;
    } else {
        //截图小的显示框内的内容
        var img_lg = $('.cropper-hidden');
        var cas = img_lg.cropper('getCroppedCanvas');
        //生成base64图片数据
        var dataUrl = cas.toDataURL('image/png');
        var newImg = document.createElement("img");
        newImg.src = dataUrl;
        imagesAjax(dataUrl);
        $('#avatarInput').val('');
        $("#avatar-name").empty();
        $(".avatar-wrapper").empty();
    }
})
function imagesAjax(src) {
    var data = {};
    data.img = src;
    $.ajax({
        url: "index.php?m=member&c=index&a=uploadavatar",
        data: data,
        type: "POST",
        dataType: 'json',
        success: function(re) {
            if(re.code == '1') {
                $('.avatar-view img').attr('src',re.data.url);
                location.reload();
            } else {
                alert(re.msg);
            }
        }
    });
}
</script>
    </div>
  </div>          
</div>
{template 'member', 'footer'}